<template>
	<scroll-view>
		<!-- 小标题 -->
		<view class="header">
			<view class="view">
				<text>精选推荐</text>
			</view>
			
		</view>
		<!-- 产品内容 渲染 -->
		<view class="center">
				<view class="item" v-for="item in HotProduct" :key="item.productId">
					<navigator :url="'../../pages/mall/productDetails/productDetails?productId='+item.productId" open-type="navigate" hover-class="none">
						<view class="item-imgage">
							<image :src="item.productImage"></image>
						</view>
						<view class="item2">{{item.productDetail}}</view>
						<view class="item3">
							<text class="item-price">￥{{item.productPrice}}</text>
							<text class="item-text">￥388.00 </text>
							<image class="item-imgage" src="https://z3.ax1x.com/2021/04/08/cYADzT.png"></image>
							<image class="item-imgage2" src="https://z3.ax1x.com/2021/04/08/cYEn6U.png"></image>
						</view>
					</navigator>
					
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {createNamespacedHelpers} from "vuex"
	const {mapState,mapMutations,mapActions} = createNamespacedHelpers("mall");
		
export default {
    name: "selected-recommendation",
    data() {
        return {
            selected: [
                {
                    id: 0,
                    image: "https://z3.ax1x.com/2021/04/08/cYAZse.png",
                    price: 299.0,
                },
                {
                    id: 1,
                    image: "https://z3.ax1x.com/2021/04/08/cYAeqH.png",
                    price: 299.0,
                },
                {
                    id: 2,
                    image: "https://z3.ax1x.com/2021/04/08/cYAgeJ.png",
                    price: 299.0,
                },
                {
                    id: 3,
                    image: "https://z3.ax1x.com/2021/04/08/cYAnZd.png",
                    price: 299.0,
                },
            ],
        };
    },
	created() {
		this.getHotProduct();
	},
	computed:{
		...mapState(["HotProduct"])
		  
	},
	methods:{
		...mapMutations(["setHotProduct"]),
		...mapActions(["getHotProduct"]),
	}
};
</script>

<style lang="scss" scoped>
.header {
    margin-top: 40rpx;
    margin-bottom: 40rpx;
    width: 100%;
    font-size: 36rpx;
    font-weight: 600;
    color: #555555;
    text-align: center;
    .view {
        background-image: url(https://z3.ax1x.com/2021/04/08/cYE3kR.png);
        background-repeat: no-repeat;
        background-size: 260rpx 40rpx;
        background-position: 225rpx;
    }
}
.center {
    margin-top: 80rpx;
    width: 100vw;
    margin-bottom: 20rpx;
    display: flex;
    flex-wrap: wrap;
    .item {
        width: 45%;
        border-radius: 30rpx;
        margin-right: 20rpx;
        margin-bottom: 40rpx;
        background-color: #ffffff;
        .item-imgage {
            padding-left: 20rpx;
            margin-top: 20rpx;
            width: 100%;
            image {
                width: 85%;
                height: 300rpx;
            }
        }
    }
    .item2 {
        color: #808080;
        font-size: 22rpx;
        width: 100%;
        height: 65rpx;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
    .item3 {
        margin-bottom: 20rpx;
        .item-price {
            font-size: 28rpx;
            color: #d97b1d;
            font-weight: 600;
            padding-right: 10rpx;
        }
        .item-text {
            font-size: 20rpx;
            color: #fbab0a;
            padding-right: 10rpx;
        }
        .item-imgage {
            width: 60rpx;
            height: 20rpx;
            padding-right: 30rpx;
        }
        .item-imgage2 {
            width: 30rpx;
            height: 30rpx;
        }
    }
}
</style>
